<template>
    {{msg}}
</template>

<script>
import { ref, unref, reactive, watchEffect, watch, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
           todoList: [
               ...list
            ]
        })
        watch(() => state.todoList, newVal => console.log(newVal))
        watchEffect(() => console.log(state.todoList))
        return {
            ...toRefs(state)
        }
    },
    const methods = {
    addTodoList(text) {
      if (!text) return alert('不能为空')
      const boo = state.todoList.find(item => item.value === text)
      if (boo) return alert('重复选项')

      state.todoList.push({
        id: state.todoList.length + 1,
        value: text,
        status: false
      });
    },
    delTodoList(id) {
      // todoList.splice(index, 1)
      state.todoList = state.todoList.filter(item => item.id !== id)
    },
    doneTodoList(index) {
      state.todoList[index].status = true;
    },
    activeTodoList(index) {
      state.todoList[index].status = false;
    }
  }
}
</script>

<style lang="scss" scoped>

</style>